<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <style>
		@import url('./assets/styles/default.css');
		@import url('./assets/styles/page/login.css');
	</style>
	<script src="./assets/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="./assets/scripts/plugin/jquery.innerfade.js" type="text/javascript"></script>
 	<title>コントロールパネル</title>
	<script>
		$(function(){
			$('#text_id').focus();
			
			var txt = $('h2 span');
			var cngText = function(t){
				txt.fadeOut(300,function(){
					txt.removeClass("error").text(t).fadeIn(300)
				})
			}
			
			$('.forget a').click(function(){
				$('form').animate({ 'left':'-400px' },500);
				cngText("メールアドレスを入力してください。");
			});
			$('.back a').click(function(){
				$('form').animate({ 'left':'0' },500);
				cngText("メールアドレスとパスワードを入力してください。");
			});
			
			if($('.error').length){
				$('#window')
					.css({ "opacity":"1","left":"0px" })
					.animate({ "left":"-10px" },100)
					.animate({ "left":"10px" },100)
					.animate({ "left":"-10px" },100)
					.animate({ "left":"10px" },100)
					.animate({ "left":"0px" },100);				
			}else {
				$('#window').animate({
					"opacity":1,
					"left":"0px"
				},300);
			}
			
			if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 7){
				// ie7は調整が必要なためとりあえず除外
			}else {
				//2回目用に一度イベントを解除しておく
				$('input[type=radio],input[type=checkbox]').unbind();
				
				//初めに全て走査して、labelに対して要素に対応したクラス付与とチェック済クラス付与
				$('input[type=radio],input[type=checkbox]').each(function(){
					var p = $(this).parent();
					p.removeClass($(this).attr('type')).addClass($(this).attr('type'));
					if($(this).attr('checked')){
						p.addClass('checked');
					}
				});
				
				//radioの監視
				$('input[type=radio]').change(function(){
					var name = $(this).attr('name');
					$('input[name=' + '"' + name + '"' +']').parent().removeClass('checked');
					$(this).parent().addClass('checked');
				});
				
				//checkboxの監視
				$('input[type=checkbox]').change(function(){
					if($(this).attr('checked')){
						$(this).parent().addClass('checked');
					}else {
						$(this).parent().removeClass('checked');
					}
				});
			}
			
		});
	</script>
    
</head>
<body>

    <header id="login_header">
    	<h1 id="logo">
        	<a href="index.php">コントロールパネル</a>
        </h1>
    </header>
        
    <article>
    	<section id="display">
    		<img src="./assets/images/login/login2.png" alt="" />
        </section>
        <section id="window">
            <h2>
            {if isset($err)}
            	{if isset($err.Blank)}<span>メールアドレスとパスワードを入力してください。</span>{/if}
            	{if isset($err.Invalid)}<span class="error">メールアドレスまたはパスワードが間違っています。</span>{/if}
            {else}
            	<span>メールアドレスとパスワードを入力してください。</span>
            {/if}
			</h2>
            <div id="inner_wrapper">
            	<div id="inner">
            		<form id="loginForm" action="{$smarty.server.SCRIPT_NAME}" method="post">
            			<ul>
            				<li class="id"><input type="text" name="data[email]" value="{$data.email|escape}" maxlength="128"/></li>
            				<li class="pass"><input type="password" name="data[login_pass]" value="" maxlength="128" /></li>
            		        <li class="save"><label><input type="checkbox" name="data[keep_login]" value="1" {if $data.keep_login == 1}checcked{/if}>ログイン状態を保持する</label></li>
            			</ul>
            		    <p class="submit">
            		    	<input type="submit" name="submit" value="LOGIN" name="submit" />
            		    </p>
            		    <input type="hidden" name="do" value="login"/>
            		</form>
            	</div>
            </div>
        </section>
    </article>
    
    {include file='include/footer.inc.html'}
    
</body>
</html>